<template>
    <div class='big'>
        <el-container>
            <!-- 头部 -->
            <el-header>
                <h1>电商后台管理系统</h1>
                <div>
                    <span>欢迎:{{ username }}</span>
                    <el-button @click="out">退出</el-button>
                </div>
            </el-header>
            <el-container>
                <!-- 侧边栏 -->
                <el-aside :width="isCollapse ? '64px' : '200px'">
                    <div
                        class="iscollspan"
                        @click="isCollapse = !isCollapse"
                    >
                        <p>|||</p>
                    </div>
                    <el-menu
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        :collapse="isCollapse"
                        :collapse-transition="false"
                        :unique-opened="true"
                        :router="true"
                        :default-active="$route.path.slice(1)"
                    >
                        <el-submenu
                            v-for="v in menusList"
                            :key="v.id"
                            :index="v.id + ''"
                        >
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span slot="title">{{v.authName}}</span>
                            </template>

                            <el-menu-item
                                v-for="vv in v.children"
                                :key="vv.id"
                                :index="vv.path"
                            >{{vv.authName}}</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <!-- 主体 -->
                <el-main>
                    <!-- 根据路由切换主页 -->
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import {
        mapGetters
    } from 'vuex';
    import {
        menus
    } from '@/http/user.js'
    export default {
        data() {
            return {
                isCollapse: false,
                menusList: [],
            };
        },
        computed: {
            ...mapGetters(["username"]),
        },
        created() {
            this.getMenus();
        },
        methods: {
            out() {
                this.$store.commit("user/DEL_TOKEN");
                this.$store.commit("user/DEL_USERNAME");
                this.$router.push("/login");
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            async getMenus() {
                let res = await menus();
                this.menusList = res.data;
            },

        },
    };
</script>

<style lang='scss' scoped>
    .el-header {
        background-color: #373d41;
        color: #fff;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
    }
    .el-aside {
        background-color: #333744;
        color: #333;
        height: calc(100vh - 60px);
    }

    .el-main {
        background-color: 333744;
        color: #fff;
        height: calc(100vh - 60px);
    }

    .iscollspan {
        background: #4a5064;
        color: #fff;
        text-align: center;
    }
</style>